﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div class="box">

    </div>
    <script>
        var data = [{
            title: "标题1",
            list: ["列表内容1", "列表内容2"]
        }, {
            title: "标题2",
            list: ["列表内容1", "列表内容2", "列表内容3"]
        }, {
            title: "标题3",
            list: ["列表内容1", "列表内容2", "列表内容3", "列表内容4"]
        }, {
            title: "标题4",
            list: ["列表内容1", "列表内容2"]
        }, {
            title: "标题5",
            list: ["列表内容1", "列表内容2", "列表内容3"]
            },];
        var str = ``;
        date.forEach(function (item) {
            str += `<div class="list">
                        <h4>${item.title}</h4>
                        <ul>`;
            var str1 = ``;
            for (var i = 0; i < item.list.length; i++) {
                str1 += `<li>${item.list[i]}</li>`
            }
            str += str1 +`</ul></div>`
        })
        var box = document.querySelector(`.box`);
        box.innerHTML = str;
    </script>
</body>
</html>